<template>
	<view class="list">
		<u-index-list :index-list="indexList">
			<template v-for="(item, index) in itemArr">
				<u-index-item>
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<view @click="gotoSeries(cell.brandId)" class="list-cell" v-for="(cell, index1) in item">
						<image :src="'https://images.weserv.nl/?url='+cell.brandlogo"></image>
						<text>{{cell.brandName}}</text>
					</view>
				</u-index-item>
			</template>
		</u-index-list>
	</view>
</template>

<script>
	import pinyin from 'js-pinyin'
	export default {
		data() {
			return {
				indexList: [],
				itemArr: []
			}
		},
		methods: {
			async loadBrand() {
				// let ret = await uni.$get('getAllBrand')
				// console.log('ret', ret)
				let {
					count,
					data
				} = await uni.$get('getAllBrand')
				data.forEach(r => {
					r.szm = pinyin.getCamelChars(r.brandName).substring(0, 1).toUpperCase()
				})
				let keys = data.map(r => r.szm)
				keys = [...new Set(keys)]
				keys.sort()
				console.log(keys)
				this.indexList = keys

				let list = keys.map(k => {
					return data.filter(r => r.szm == k)
				})
				console.log(list)
				this.itemArr = list
			},
			// 图片防盗链问题解决
			attachImageUrl(srcUrl) {
				if (srcUrl !== undefined) {
					srcUrl = 'https:' + srcUrl
					console.log('........', srcUrl)
					let convertUrl = srcUrl.replace(/http\w{0,1}:\/\/p/g, 'https://images.weserv.nl/?url=p')
					console.log('convertUrl', convertUrl)
					return convertUrl
				}
			},
			gotoSeries(brandId) {
				uni.navigateTo({
					url: "../series/series?brandId=" + brandId
				})
				console.log('goto')
			}
		},
		onLoad() {
			this.loadBrand()
		}
	}
</script>

<style scoped lang="scss">
	.list {
		.list-cell {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			text {
				margin-left: 10px;
			}
		}


	}
</style>
